<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
		  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
		  <link rel="stylesheet"  href="./css/css.css"/>
		<title></title>
	</head>
	<body>
		 <div class="wrap">
		    <div class="play_wrap" id="player">
		      <div class="search_bar">
		        <img src="https://sm.ms/image/FO95hAIXyZqoHct" alt="" />
		        <!-- 搜索歌曲 -->
		        <input type="text" placeholder="输入要搜索的Music" autocomplete="off" v-model='query' @keyup.enter="searchMusic();" />
		      </div>
		      <div class="center_con">
		        <!-- 搜索歌曲列表 -->
		        <div class='song_wrapper' ref='song_wrapper'>
		          <ul class="song_list">
		            <li v-for="item in musicList">
		              <!-- 点击放歌 -->
		              <a href="javascript:;" @click='playMusic(item.id)'></a>
		              <b>{{item.name}}</b>
		              <span>
		                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
		              </span>
		            </li>
		
		          </ul>
		          <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="switch_btn" alt="">
		        </div>
		        <!-- 歌曲信息容器 -->
		        <div class="player_con" :class="{playing:isPlay}">
		          <img src="https://i.loli.net/2020/03/23/gZHko2WlpJNcGPv.png" class="play_bar" />
		          <!-- 黑胶碟片 -->
		          <img src="https://i.loli.net/2020/03/23/hQPuH4gNRx7XayI.png" class="disc autoRotate" />
		          <img :src="coverUrl==''?'https://i.loli.net/2020/03/23/QEL4rdy5KCsn3cz.png':coverUrl" class="cover autoRotate" />
		        </div>
		        <!-- 评论容器 -->
		        <div class="comment_wrapper" ref='comment_wrapper'>
		          <h5 class='title'>热门留言</h5>
		          <div class='comment_list'>
		
		            <dl v-for="item in hotComments">
		              <dt>
		                <img :src="item.user.avatarUrl" alt="" />
		              </dt>
		              <dd class="name">{{item.user.nickname}}</dd>
		              <dd class="detail">
		                {{item.content}}
		              </dd>
		            </dl>
		          </div>
		          <img src="https://i.loli.net/2020/03/23/dor23bhZtIvK17X.png" class="right_line">
		        </div>
		      </div>
		      <div class="audio_con">
		        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" controls autoplay loop class="myaudio"></audio>
		      </div>
		      <div class="video_con" v-show="showVideo">
		        <video ref='video' :src="mvUrl" controls="controls"></video>
		        <div class="mask" @click="closeMv"></div>
		      </div>
		    </div>
		  </div>
		  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
		  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		  <!-- 官网提供的 axios 在线地址 -->
		  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		  <script type="text/javascript">
		    // 设置axios的基地址
		    axios.defaults.baseURL = 'https://autumnfish.cn';
		    // axios.defaults.baseURL = 'http://localhost:3000';
		
		    // 实例化vue
		    var app = new Vue({
		      el: "#player",
		      data: {
		        // 搜索关键字
		        query: '',
		        // 歌曲列表
		        musicList: [],
		        // 歌曲url
		        musicUrl: '',
		        // 是否正在播放
		        isPlay: false,
		        // 歌曲热门评论
		        hotComments: [],
		        // 歌曲封面地址
		        coverUrl: '',
		        // 显示视频播放
		        showVideo: false,
		        // mv地址
		        mvUrl: ''
		      },
		      // 方法
		      methods: {
		        // 搜索歌曲
		        searchMusic() {
		          if (this.query == 0) {
		            return
		          }
		          axios.get('/search?keywords=' + this.query).then(response => {
		            // 保存内容
		            this.musicList = response.data.result.songs;
		
		          })
		
		          // 清空搜索
		          this.query = ''
		        },
		        // 播放歌曲
		        playMusic(musicId) {
		          // 获取歌曲url
		          axios.get('/song/url?id=' + musicId).then(response => {
		            // 保存歌曲url地址
		            this.musicUrl = response.data.data[0].url
		          })
		          // 获取歌曲热门评论
		          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
		            // console.log(response)
		            // 保存热门评论
		            this.hotComments = response.data.hotComments
		
		          })
		          // 获取歌曲封面
		          axios.get('/song/detail?ids=' + musicId).then(response => {
		            // console.log(response)
		            // 设置封面
		            this.coverUrl = response.data.songs[0].al.picUrl
		          })
		
		        },
		        // audio的play事件
		        play() {
		          this.isPlay = true
		          // 清空mv的信息
		          this.mvUrl = ''
		        },
		        // audio的pause事件
		        pause() {
		          this.isPlay = false
		        },
		        // 播放mv
		        playMv(vid) {
		          if (vid) {
		            this.showVideo = true;
		            // 获取mv信息
		            axios.get('/mv/url?id=' + vid).then(response => {
		               console.log(response)
		              // 暂停歌曲播放
		              this.$refs.audio.pause()
		              // 获取mv地址
		              this.mvUrl = response.data.data.url
		            })
		          }
		        },
		        // 关闭mv界面
		        closeMv() {
		          this.showVideo = false
		          this.$refs.video.pause()
		        },
		        // 搜索历史记录中的歌曲
		        historySearch(history) {
		          this.query = history
		          this.searchMusic()
		          this.showHistory = false;
		        }
		      },
		
		    })
		
		  </script>
	</body>
</html>
